<template>
	<div class="vue_app newActivities" style="position: relative;width: 100%;">
		<div>
			<my-header :title="'新人活动'" :hasTitle="true" :hasBack="true"></my-header>
			<!--头部-->
		</div>
		<div class="overhid" :style="`height: ${screenHeight}px`">
			<vertical-scroll ref='verticalScroll' style="background-color: #FE9900;">
				<!--头部-->
				<div class="activitiesbanner">
					<img src="static/image/newActivities_banner.jpg" />
				</div>
				<!--滑动优惠券-->
				<new-activitie-coupons></new-activitie-coupons>
				<!--活动商品1-->
				<new-activities-product :goodsInfo="goodsInfo" :saleType="saleType" :bargainPriced="bargainPriced" bigimg="static/image/newActivities_pic1.png"></new-activities-product>
				<!--活动商品2-->
				<new-activities-product :goodsInfo="goodsInfo" :saleType="saleType" :bargainPriced="bargainPriced" bigimg="static/image/newActivities_pic2.png"></new-activities-product>
				<!--使用规则-->
				<div class="UsageRule">
					<div class="ruletitle">
						<span>新人礼包使用规则</span>
					</div>
					<div class="ruleconcent">
						<p>1、未使用宁家鲜生APP购买过商品的用户，可以享受新人享鲜价购买1件商品，单个商品超出1件后，该商品将全部回复原价。享鲜价的商品可以与首个订单的新人券同时使用。</p>
						<p>2、每张订单仅能只用一张新人券。如一个订单中同时满足多个新人券活动，需分开下单，即可使用</p>
						<p>3、使用新人券的订单发生退货时，新人券不退回。</p>
						<p>4、新人礼券自领取日起20日内有效，过期失效。</p>
					</div>
				</div>

			</vertical-scroll>
		</div>
		<button-to-top @goTop="goTop"></button-to-top>
	</div>
</template>

<script>
	import MyHeader from "../header";
	import axios from "axios";
	import VerticalScroll from '../../real-components/VerticalScroll';
	import ButtonToTop from '../../real-components/ButtonToTopForTest';
	import NewActivitieCoupons from '../../real-components/NewActivitieCoupons';
	import NewActivitiesProduct from '../../real-components/NewActivitiesProduct';
	export default {
		data() {
			return {
				activityType: '1',
				id: '1070',
				goodsInfo: [],
				goodsInfo1:[],
				goodsInfo2:[],
				saleType: "",
				bargainPriced:null,
			}
		},
		components: {
			"my-header": MyHeader,
			"vertical-scroll": VerticalScroll,
			ButtonToTop,
			NewActivitieCoupons,
			NewActivitiesProduct
		},
		methods: {
			//获取路由信息
			getquery() {
				/*this.activityType = this.$route.query.cardid
				this.id = this.$route.query.cardid*/
			},
			//回到顶部
			goTop() {
				this.$refs.verticalScroll.goTop()
			},
			getproductdata() {
				var sessionId = localStorage.getItem('sessionId');
				let config = {
					url: window.api.base_host + '/marketingCenter/getActivityById/' + this.activityType + '/' + this.id,
					method: 'GET',
					headers: {
						'sessionId': sessionId,
					},
				};
				axios(config).then((res) => {
					if(res.data.returnCode == 1) {
						let resdata = res.data.data[0][0]
						if(resdata.saleType == "buyPresent") { //商品买赠
							this.saleType = "送赠品"
						} else if(resdata.saleType == "specialOffer") { //商品特价
							if(resdata.batchSpecialPrice) {
								this.saleType = "特价"
								this.bargainPriced = 1
							} else if(resdata.batchReducePrice) {
								this.saleType = "减价"
								this.bargainPriced = 2
							}
						} else if(resdata.saleType == "discount") { //商品折扣
							this.saleType = resdata.batchDiscount + '折'
						} else if(resdata.saleType == "overBuy") { //商品多买
							if(resdata.minusNum) {
								this.saleType = "多买减" + resdata.minusNum
							} else if(resdata.minusSale) {
								this.saleType = "多买" + resdata.minusSale + "折"
							}
						}
						var codelist = []
						if(resdata.promotionalGoodsList && resdata.promotionalGoodsList.length > 0) {
							var goodsList = resdata.promotionalGoodsList
							codelist = goodsList.map((item) => {
								return {
									goodsCode: item.goodsCode,
									goodsPromPrice: item.goodsPromPrice
								}
							})
						}
						this.goodsInfo = codelist
						
					}
				})

			},

		},
		computed: {
			screenHeight() {
				return window.innerHeight - '60';
			},

		},

		watch: {
			saleType() {
				this.getquery();
				this.getproductdata()
			}
		},
		mounted() {
			this.getquery();
			this.getproductdata()
		},
	}
</script>

<style>
	.overhid {
		overflow: hidden;
	}
	
	.newActivities .ruletitle span {
		color: #fff;
		border: 1px solid rgba(255, 255, 255, 0.5);
		display: inline-block;
		font-size: 0.9rem;
		padding: 0.2rem 0.3rem;
	}
	
	.newActivities .ruleconcent {
		text-align: left;
		padding: 1rem 1.2rem;
	}
	
	.newActivities .ruleconcent p {
		color: #fff;
		line-height: 23px;
	}
</style>